<meta content=""  charset="utf-8">

<table width="100%">
    <tr class="calendarx">
        <td width="68.5%">
            <div id ="titulo-agenda">
                holap, soy el titulo
            </div>

        </td>
        
        <td width="31.5%">
            <form id="FormAgenda" name="FormAgenda" action="<?php echo url_for("@default?module=supervisorvacio&action=index") ?>" method="post">
                <table>
                    <tbody>
                        <tr>
                            <label>Sucursal:</label>
                            <select name="AgendaSucursal" id="AgendaSucursal">
                                <?php foreach ($gestdent_sucursal_list as $gestdent_sucursal): ?>
                                    <?php echo ("<option value='" . $gestdent_sucursal->getId()."'>") ?>
                                    <?php echo $gestdent_sucursal->getNombre(); ?>
                                    <?php echo ("</option>") ?>
                                <?php endforeach; ?>
                            </select>
                        </tr>

                        <tr>
                            <input name="AgendaFecha" id="AgendaFecha" type="hidden"/>
                            <div id="calendar"/>
                        </tr>

                        <tr>
                            <br/><div class="boton"><input type="submit" value="Aceptar" /></div>
                        </tr>

                        <tr>
                            <div id="ajax_loader">
                                <?php echo image_tag('/images/loader.gif', array("style" => "display: none","id" =>"loader_gif")); ?>
                            </div>
                        </tr>
                    </tbody>
                </table>
            </form>
        </td>
    </tr>
</table>


<div class="demo">

<div id="tabs" class="tabs-bottom">
	<ul>
		<li><a href="#tabs-1" class="nikon">MAÑANA</a></li>
		<li><a href="#tabs-2">TARDE</a></li>
	</ul>
    
	<div class="bodytab" id="tabs-1">
            <div>
                <table id="customers">
                    <thead>

                    </thead>

                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    
	<div class="bodytab" id="tabs-2">
            Estoy vacio
        </div>
    </div>
</div><!-- End demo -->


<!-- JAVASCRIPTS -->
<script type="text/javascript">
    $(function(){
        $( "#tabs" ).tabs();
    });
</script>


<script type="text/javascript">

        // esperamos que el DOM cargue
        $(document).ready(function() {
            // definimos las opciones del plugin AJAX FORM
            var opciones= {
                               beforeSubmit: mostrarLoader, //funcion que se ejecuta antes de enviar el form
                               success: mostrarRespuesta //funcion que se ejecuta una vez enviado el formulario
            };
             //asignamos el plugin ajaxForm al formulario myForm y le pasamos las opciones
            $('#FormAgenda').ajaxForm(opciones) ;



             //lugar donde defino las funciones que utilizo dentro de "opciones"
             function mostrarLoader(){
                          $("#loader_gif").fadeIn("slow"); //muestro el loader de ajax

                          var FechaCalendario = new Date(Date.parse($("div#calendar").datepicker('getDate')));


                          var FechaTexto = FechaCalendario.toLocaleDateString();


                          // malo porque saca el value del selec   var SucursalTexto = document.FormAgenda.AgendaSucursal.selecteditem();

                          $("#titulo-agenda").text(FechaTexto.toUpperCase());


             };

             function mostrarRespuesta (responseText){
                           //alert("Mensaje enviado: "+responseText);  //responseText es lo que devuelve la página contacto.php. Si en contacto.php hacemos echo "Hola" , la variable responseText = "Hola" . Aca hago un alert con el valor de response text

                          $("#loader_gif").fadeOut("slow"); // Hago desaparecer el loader de ajax
                          $("#tabs-1").html(responseText + "<br/>");
                          
             };

        });

</script>

<script type="text/javascript">

        // esperamos que el DOM cargue
        $(document).ready(function() {
            // definimos las opciones del plugin AJAX FORM
            var opciones= {
                               beforeSubmit: mostrarLoader, //funcion que se ejecuta antes de enviar el form
                               success: mostrarRespuesta //funcion que se ejecuta una vez enviado el formulario
            };
             //asignamos el plugin ajaxForm al formulario myForm y le pasamos las opciones
            $('#FormAgenda2').ajaxForm(opciones) ;



             //lugar donde defino las funciones que utilizo dentro de "opciones"
             function mostrarLoader(){
                          $("#loader_gif").fadeIn("slow"); //muestro el loader de ajax
             };






             function mostrarRespuesta (responseText){
                           //alert("Mensaje enviado: "+responseText);  //responseText es lo que devuelve la página contacto.php. Si en contacto.php hacemos echo "Hola" , la variable responseText = "Hola" . Aca hago un alert con el valor de response text

                            var variable_post="<input name='AgendaDia' id='AgendaDia' type='text' value='2' />";
                                    $("superDiv").html(variable_post);


                            var theDate = new Date(Date.parse($("div#calendar").datepicker('getDate')));
                            var MyDay = theDate.getDay();





                          $("#loader_gif").fadeOut("slow"); // Hago desaparecer el loader de ajax
                          $("#tabs-1").html(responseText + "<br/>");

             };

        });

</script>


<!-- SCRIPT DEL CALENDARIO -->
<script type="text/javascript">
    $(document).ready(function(){
        $("div#calendar").datepicker({
            altField: 'input#AgendaFecha',
            altFormat: 'yy-mm-dd',
            firstDay: 1
        });
    }); 
</script>


<!-- SCRIPT QUE RECARGA CONTENIDO DE UN DIV -->
<script type="text/javascript">
function ReloadDiv(div,data){
    var variable_post= data.toString();
    $(div).html(variable_post);
}
</script>


<!-- MANEJA BOTON JQUERY -->
<script type="text/javascript">
    $(function() {
        $( "button, input:submit, a", ".boton" ).button();
        $( "a", ".demo" ).click(function() { return false; });
    });
</script>


<!-- CSS -->
<style type="text/css">
/* Vertical Tabs
----------------------------------*/
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: right; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: right; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
.ui-tabs-vertical .ui-tabs-nav li a.nikon {background:url(http://localhost/gestdent/web/images/under_construction.jpg);}
.ui-tabs-vertical .ui-tabs-nav li a.canon {background:url(canon.png);}
.ui-tabs-vertical .ui-tabs-nav li a.pentax {background:url(pentax.png);}
</style>